<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>更换头像</span>
        </div>
        <div>
            <!-- 图片，用来展示用户选择的头像 -->
            <!-- <img src="../../../assets/images/avatar.jpg" alt="" class="preview" /> -->

            <img :src="imageUrl" alt="" class="preview" v-if="imageUrl" />
            <img src="../../../assets/images/avatar.jpg" alt="" class="preview" v-else />
            <!-- 按钮区域 -->
            <div class="btn-box">
                <input type="file" accept="image/*" style="display: none;" ref="ipFile" @change="onFileChange" />
                <!-- 增加的代码 -->
                <el-button type="primary" icon="el-icon-plus" @click="chooseImg">选择图片</el-button>
                <el-button type="success" icon="el-icon-upload" :disabled="imageUrl === ''"
                    @click="uploadAvatar">上传头像</el-button>
            </div>
        </div>
    </el-card>
</template>
  
<script>
import { patchImageUrl } from '@/api/user.js'
export default {
    name: 'UserAvatar',
    data() {
        return {
            imageUrl: ''  //保存base64 字符串
        }
    },
    methods: {
        chooseImg() {
            // 模拟点击行为
            this.$refs.ipFile.click()
        },
        onFileChange(e) {
            console.log('上传了图片', e);
            // 1. 获取文件上传的列表
            const files = e.target.files;
            console.log(files);
            // 2. 判断有没有选中图片
            if (files.length !== 0) {
                // 3. 选择了图片
                // 3.1 创建FileReader对象
                var reader = new FileReader();   //FileReader  是js内置的
                // 3.2 调用readAsDataURL函数读取文件内容
                reader.readAsDataURL(files[0]);
                // 3.3 监听onload事件，读取完成触发回调函数
                reader.addEventListener("load", () => {
                    // 3.4 获取到base64字符串，存储到data中
                    this.imageUrl = reader.result;
                });
            } else {
                // 4.没有选择图片
                this.imageUrl = "";
            }
        },
        // 上传用户头像
        async uploadAvatar() {
            // const { data: res } = await this.$http.patch('/my/update/avatar', { avatar: this.avatar })
            const res = await patchImageUrl({ avatar: this.imageUrl })
            console.log('上传图片发送请求', res);
            if (res.code !== 0) return this.$message.error(res.message)
            this.$message.success(res.message)
            // 清空上传图片input框
            this.imageUrl = ''
            // 重新获取用户信息
            this.$store.dispatch('user/getUserinfo')
        }
    }
}
</script>
  
<style lang="less" scoped>
.btn-box {
    margin-top: 10px;
}

.preview {
    object-fit: cover;
    width: 350px;
    height: 350px;
}
</style>
  